<template>
  <div class="home">
    <!-- 1. 轮播图 -->
    <section class="carousel-section">
      <img
        class="carousel-section"
        src="https://20560495.s61i.faiusr.com/2/AD0I7-TmCRACGAAg3_-07AUo0qi28QIwgA84rAI.jpg.webp"
        alt=""
      />
    </section>
    <!-- 2. 用户量展示 -->
    <section class="users-section" v-scroll-fade>
      <div class="user-1">
        <div class="tomber">
          <span style="font-size: 24px; color: #333333">关于我们</span>
          <span style="font-size: 14px; color: #a8a8a8">About us</span>
        </div>
        <div class="treeform">
          <span class="tree-title">
            美容护肤原料限公司成立于1999年，是一家专业代理和经销个人护理品原料的进口贸易商。
            我们以广泛多样的产品线服务客户20年，集研发、生产于一体的化妆品企业，公司拥有现代化厂房10000多平方米，
            及符合国家GMP认证的10万级无菌生产车间，5条生产线产品线包括乳化剂，增稠稳定剂，润肤剂，表面活性剂，剂，防腐剂，香精以及各种功效活性物。在业界享有良好声誉，过往20年来，我们专业并充满活力的销售和客服团队覆盖全国，形成全面深入的业务网络，并于2012年相继在广州和上海设立了先进的研发中心和专业仓储中心。
          </span>
        </div>
        <div class="form-txt">
          <div class="form-box">
            <div class="from-img">
              <img
                class="imgs"
                src="https://20560495.s61i.faiusr.com/2/AD0I7-TmCRACGAAg5vL07AUoiKejmAYwugQ44AI.jpg.webp"
                alt=""
              />
            </div>
            <div class="from-num">
              <span style="font-size: 24px; color: #333333">专注成分</span>
              <span style="font-size: 14px; color: #a8a8a8">
                致力自然主义化妆品的研究，我们认为化妆品不是工业品，是高科技和自然额结合，
                对提取物做认真负责的研究，探寻以自然生命力肌肤问题
              </span>
            </div>
          </div>
          <div class="form-box">
            <div class="from-num">
              <span style="font-size: 24px; color: #333333">科技为证</span>
              <span style="font-size: 14px; color: #a8a8a8">
                “科技创造未来“我们的企业宗旨，我们一直视化妆品配方技术为企业的核心价值，
                发挥双研发中心的技术优势，为中国化妆品的行业精英持续提供技术增值服务。
              </span>
            </div>
            <div class="from-img">
              <img
                class="imgs"
                src="https://20560495.s61i.faiusr.com/2/AD0I7-TmCRACGAAg6KD17AUopNDdnAEwugQ44AI.jpg.webp"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 3. 产品展示 -->
    <section class="users-section" v-scroll-fade>
      <div class="user-1">
        <div class="tomber">
          <span style="font-size: 24px; color: #333333">公司优势</span>
          <span style="font-size: 14px; color: #a8a8a8">company advantage</span>
        </div>
        <div class="treeform">
          <span class="tree-title">
            我们坚信只要我们有尽可能多的技术储备，这些积累下来的技术经验有必定会有助于满足客户的多种多样的需求。我们认为这就是真正的技术力量。如此创造出产品并确认它有什么物理性质／化学特性，这就是研发者的责任。为了能够准确的确定这些信息我们不惜投入大量的资金用于购买各种优先端的分析仪器11
          </span>
        </div>
        <div class="carouse">
          <el-carousel :interval="4000" type="card" height="450px">
            <el-carousel-item v-for="item in 6" :key="item">
              <h3 text="2xl" justify="center">{{ item }}</h3>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.home {
  display: flex;
  flex-direction: column;
}
section {
  background-color: #ffffff;
}
.carousel-section {
  width: 100%;
  height: 300px;
  padding: 0;
}
.users-section {
  display: flex;
  flex-direction: column;
  background: rgb(248 248 246);
  .user-1 {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 800px;
    padding: 60px 10%;
    background: #ffffff;
    .tomber {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 80px;
    }
    .treeform {
      display: flex;
      padding: 30px 0;
      .tree-title {
        color: #999999;
        text-align: center;
      }
    }
    .form-txt {
      display: flex;
      gap: 60px;
      height: 550px;
      .form-box {
        display: flex;
        flex: 1;
        flex-direction: column;
        .from-img {
          height: 350px;
          .imgs {
            width: 100%;
            height: 350px;
            object-fit: cover;
          }
        }
        .from-num {
          display: flex;
          flex-direction: column;
          gap: 30px;
          justify-content: center;
          height: 200px;
          padding: 50px 20px;
        }
      }
    }
    .carouse {
      display: flex;
      align-items: center;
      height: 450px;
      padding: 0 50px;
    }
  }
}
.el-carousel__item h3 {
  margin: 0;
  line-height: 200px;
  color: #475669;
  text-align: center;
  opacity: 0.75;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
</style>
